<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//内部插入子元素
				$(".append").click(function(){
					//所有子元素之后
					$("ul").append("<li>列表append</li>")
				})
				$(".prepend").click(function(){
					//所有子元素之前
					$("ul").prepend("<li>列表prepend</li>")
				})
				//把所有段落追加到div中
//				$("p").appendTo("div")
				//
//				$("<p/>")
//				   .appendTo("div")
//				   .addClass("test")
//				   .end()
//				   .addClass("test2");
				//外部插入 =>兄弟元素
				$(".before").click(function(){
					//当前元素之前
					$("ul").before("<li>列表before</li>")
				})
				$(".after").click(function(){
					//当前元素之后
					$("ul").after("<li>列表after</li>")
				})
				$(".before").click(function(){
					//
					$("ul").empty("<li>列表before</li>")
				})
				$(".after").click(function(){
					//
					$("ul").remove("<li>列表after</li>")
				})
//				$("li").click(function(){
//					console.log($(this).text())
//				})
				//on的作用：提供绑定事件处理程序所需的所有功能，要附加一个事件，只运行一次，然后删除自己
				$("body").on("click","li",function(){
					console.log($(this).text())
				})
//				//把所有段落插入到一个元素之后
//				$("p").insertAfter("#foo");
//				//把所有段落插入到一个元素之前
//				$("p").insertBefore("#foo1");//insertBefore(id名)
			})
		</script>
	</head>
	<body>
		<button type="button" class="prepend">prepend</button>
		<button type="button" class="append">append</button>
		<br />
		<button type="button" class="before">before</button>
		<button type="button" class="after">append1</button>
		<br />
		<button type="button" class="empty">empty</button>
		<button type="button" class="remove">remove</button>
		<br />
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</ul>
		<!--<p>I would like to say: </p>-->
		<!--<p></p>
		<div></div><div></div>-->
		<p>I would like to say: </p><div id="foo">Hello</div>
		<div id="foo1">Hello</div><p>I would like to say: </p>
	</body>
</html>
